<script setup>
import * as echarts from 'echarts';
import { onMounted, onBeforeUnmount } from 'vue';

onMounted(() => {
    // 图1
    var chartDom1 = document.getElementById('graph1');
    var myChart1 = echarts.init(chartDom1);
    var option1;
    // 图2
    var chartDom2 = document.getElementById('graph2');
    var myChart2 = echarts.init(chartDom2);
    var option2;

     // 图1相关配置
    option1 = {
        tooltip: {
            trigger: 'item'
        },
        color: ['#f35b08', '#f28703', '#f6b801', '#7578ed'],
        series: [
            {
                name: '健康状况',
                type: 'pie',
                radius: ['50%', '70%'],
                // 开启自动避让
                avoidLabelOverlap: true,
                center: ['50%', '50%'],
                itemStyle: {
                    borderRadius: 2,
                    borderColor: '#fff',
                    borderWidth: 1,
                },
                label: {
                    show: true,
                    position: 'outside',           // 标签在外部
                    formatter: '{b}\n{d}%',        // 显示名称 + 换行 + 百分比
                    // formatter: '{b}: {d}%',     // 也可以写在同一行
                    color: '#333',
                    fontSize: 10
                },
                labelLine: {
                    show: true,                    // 显示引导线
                    // length: 10,                    // 第一段长度
                    // length2: 15,    
                    smooth: true                  // 可选：true 表示曲线
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 10,
                        fontWeight: 'bold'
                    }
                },
                data: [
                    { value: 100, name: '危机' },
                    { value: 100, name: '预警' },
                    { value: 500, name: '一般' },
                    { value: 2000, name: '健康' }
                ]
            }
        ]
    };
    // 图2相关配置
    option2 = {
        tooltip: {
            trigger: 'item'
        },
        label: {
            show: true, // 改为 true，否则看不到标签
            position: 'center', // 可选：'inside', 'outside', 'center'
            formatter: '{d}%', // 使用 {d}% 显示百分比
            color: 'rgba(0, 0, 0, 0.6)', // 可选：设置字体颜色
            fontSize: 12
        },
        series: [
            {
                name: '来源',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                center: ['50%', '50%'],
                label: {
                    show: true,
                    position: 'outside',           // 标签在外部
                    formatter: '{b}\n{d}%',        // 显示名称 + 换行 + 百分比
                    // formatter: '{b}: {d}%',     // 也可以写在同一行
                    color: '#333',
                    fontSize: 10
                },
                labelLine: {
                    show: true,                    // 显示引导线
                    smooth: true                  // 可选：true 表示曲线
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 10,
                        fontWeight: 'bold'
                    }
                },
                itemStyle: {
                    borderRadius: 2,
                    borderColor: '#fff',
                    borderWidth: 1
                },
                data: [
                    { value: 12, name: '适应' },
                    { value: 45, name: '人际关系' },
                    { value: 78, name: '学校压力' },
                    { value: 12, name: '抑郁' },
                    { value: 200, name: '焦虑' }
                ]
            }
        ]
    };

    // 设置图形配置
    option1 && myChart1.setOption(option1);
    option2 && myChart2.setOption(option2);

    // 监听窗口 resize 事件
    const handleResize = () => {
        myChart1?.resize();
        myChart2?.resize();
    };

    // 添加窗口变化的监听事件
    window.addEventListener('resize', handleResize);

    // 组件卸载前移除监听，防止内存泄漏
    onBeforeUnmount(() => {
        window.removeEventListener('resize', handleResize);
        // 销毁图表实例
        myChart1?.dispose();
        myChart2?.dispose();
    });

})
</script>

<template>
<div class="box">
    <div class="title"><img src="@/assets/images/home/首页各个功能标题前图标.png" alt="" width="22px" height="22px" style="margin-right: 10px">学校心理健康情况</div>
    <div class="graph-box">
        <div id="graph1">dddddddddddddddd</div>
        <div id="graph2">w</div>
    </div>
</div>
</template>

<style scoped>
.box {
    width: 1200px;
    height: 530px;
    margin: 0 auto;
    margin-top: 54px;
    /* background-color: pink; */
}
.title {
  display: flex;
  align-items: center;
  font-size: 16px;
  padding-left: 30px;
  padding-bottom: 30px;
}
.graph-box {
    display: flex;
    justify-content: space-between;
    height: 476px;
    background-color: white;

}
#graph1 {
    width: 50%;
    height: 100%;
    /* background-color: red; */
}
#graph2 {
    width: 50%;
    height: 100%;
    /* background-color: blue; */
}
</style>
